<template>
  <el-aside class="layout-aside-container">
    <!-- 左侧边栏列表 -->
    <!-- 管理员 -->
    <el-menu :default-active="activeIndex" class="user-select-none" @select="handleSelect" v-if="user.userRole === 0">
      <el-menu-item index="1">
        <span slot="title">
          <router-link to="/main/customer">客户管理</router-link>
        </span>
      </el-menu-item>
      <el-menu-item index="2">
        <span slot="title">
          <router-link to="/main/worker">送水工管理</router-link>
        </span>
      </el-menu-item>
      <el-menu-item index="3">
        <span slot="title" ><router-link to="/main/history">送水历史管理</router-link></span>
      </el-menu-item>
      <el-menu-item index="4">
        <span slot="title"><router-link to="/main/salary">工资统计</router-link></span>
      </el-menu-item>
      <el-menu-item index="5">
        <span slot="title"><router-link to = "/main/stat">送水数量统计</router-link></span>
      </el-menu-item>
      <el-menu-item index="6">
        <span slot="title" ><router-link to="/main/modifyPwd">修改密码</router-link></span>
      </el-menu-item>
       <el-menu-item index="6">
        <span slot="title" ><router-link to="/main/modifyInfo">修改个人信息</router-link></span>
      </el-menu-item>
    </el-menu>

    <!-- 送水工   -->
    <el-menu :default-active="activeIndex" class="user-select-none" @select="handleSelect" v-if="user.userRole === 1">
      <el-menu-item index="1">
        <span slot="title" ><router-link to="/main/workerOrder">订单</router-link></span>
      </el-menu-item>
       <el-menu-item index="2">
        <span slot="title" >
            <router-link to="/main/historyForWorker">查看送水历史</router-link>
        </span>
      </el-menu-item>
      <el-menu-item index="3">
        <span slot="title" ><router-link to="/main/modifyPwd">修改密码</router-link></span>
      </el-menu-item>
    </el-menu>

    <!-- 顾客   -->
    <el-menu :default-active="activeIndex" class="user-select-none" @select="handleSelect" v-if="user.userRole === 2">
      <el-menu-item index="1">
        <span slot="title"><router-link to = "/main/customerModify">修改用户信息</router-link></span>
      </el-menu-item>
      <el-menu-item index="2">
        <span slot="title"><router-link to = "/main/customerOrder">订单</router-link></span>
      </el-menu-item>
       <el-menu-item index="3">
        <span slot="title" >
            <router-link to="/main/historyForCust">查看送水历史</router-link>
        </span>
      </el-menu-item>
      <el-menu-item index="6">
        <span slot="title" ><router-link to="/main/modifyPwd">修改密码</router-link></span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['user'])
  },
  created() {
    console.log('User from Vuex Store:', this.user);
  },
  methods: {
    handleSelect(key, keyPath) {

    }
  }
}
</script>

<style lang="less" scoped>
.layout-aside-container {
  width: 250px;
  height: 100%;
  border-right: 1px solid #eaeaea;
}

.menu {
  list-style-type: none;
  padding: 0;
  .menu-item {
    line-height: 50px;
    font-weight: bold;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
    &:hover {
      background-color: #efefef;
      cursor: pointer;
    }
    a {
      display: block;
      color: black;
      padding-left: 30px;
      &:hover {
        text-decoration: none;
      }
    }
  }
}

// 设置路由高亮效果
.router-link-active {
  background-color: #efefef;
  box-sizing: border-box;
  position: relative;
  // 伪元素实现路由高亮效果
  &::before {
    content: ' ';
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #42b983;
  }
}
</style>
<!-- 左侧边栏列表 -->